<template>
  <h2>n={{ n }}</h2>
  <button @click="n++">n++</button>
  <h2>姓名：{{ user.name }}</h2>
  <h2>年龄：{{ user.age }}</h2>
  <h2>薪水：{{ user.job.salary }}K</h2>
  <button @click="user.name += '~'">修改姓名</button>
  <button @click="user.age++">修改年龄</button>
  <button @click="user.job.salary++">修改薪水</button>
  <div style="margin: 30px; background: #ddeeff">
    <fieldset v-if="user.position?.city">
      <h3>省：{{ user.position.province }}</h3>
      <h3>市：{{ user.position.city }}</h3>
      <button @click="user.position!.province += '#'">修改省</button>
      <button @click="user.position!.city += '#'">修改市</button>
    </fieldset>
  </div>
  <hr />
  <button @click="addPosition">添加位置信息</button>
</template>
<script lang="ts">
//定义用户类型
type UserInfo = {
  name: string;
  age: number;
  job: {
    salary: number;
  };
  position?: {
    province: string;
    city: string;
  };
};

import { reactive, ref, toRaw, markRaw } from "vue";
export default {
  setup() {
    let n = ref(0);
    let user: UserInfo = reactive({
      name: "rose",
      age: 99,
      job: {
        salary: 30,
      },
    });

    function addPosition() {
      //添加一个新的对象position，将该对象标记为非响应式对象
      user.position = markRaw({
        province: "广东",
        city: "珠海",
      });
      console.log(user);
    }

    return { n, user, addPosition };
  },
};
</script>
